/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable react/jsx-key */
import { DeleteOutlined, ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { ActionType, ProCard, ProColumns, ProTable } from "@ant-design/pro-components";
import type { FormInstance } from "antd";
import { Button, Col, Modal, Row, message } from "antd";
import React, { useEffect, useRef, useState } from "react";
import CountPie from "./components/countPie";
import WeekColumn from "./components/weekColumn";
import { getDict } from "@/services/api/module/system/dict";
import { DictValueEnum } from "@/components/DictTag";
import { countData, getPageList } from "@/services/api/module/system/loginLog";
import { useTableScroll } from "@/hooks/useTableScroll";
import CustomerTable from "@/components/CustomerTable";
import { createTableColumns, pagination, tableTab } from "./constants";
import LoginLogDetail from "./components/loginLogDetail";
import { dict } from "@/utils/DictionaryCacheManager";

const OperlogTableList: React.FC = () => {
	const formTableRef = useRef<FormInstance>();
	const [activeKey, setActiveKey] = useState<React.Key>("oper");
	const actionRef = useRef<ActionType>();
	const [statusOptions, setStatusOptions] = useState<any>([]);
	const [params, setParams] = useState<any>({ status: activeKey === "oper" ? 0 : 1 });
	const [selectedRows, setSelectedRows] = useState<API.Setting.LoginLogVo[]>([]);
	const [pieData, setPieData] = useState<any>([]);
	const [detailOpen, setDetailOpen] = useState(false);
	const [statusData, setStatusData] = useState<any>([]);
	const [dataSource, setDataSource] = useState<any>({});
	const tableSrcollHeight = useTableScroll({ extraHeight: 515 });
	useEffect(() => {
		dict.getDict("sys_common_status", true).then((data: any) => {
			setStatusOptions(data);
		});
	}, []);

	useEffect(() => {
		countData().then((data: any) => {
			const pie = data?.pie;
			const columns = data?.column;
			const newColumns: any[] = [];
			columns?.forEach((column: { status: string; name: any }) => {
				if (column?.status === "0") {
					column.name = "登录成功";
				} else {
					column.name = "登录失败";
				}
				// return column;
				newColumns.push(column);
			});
			const pieData = [
				{
					fieldName: "登录成功",
					value: Number(pie.success)
				},
				{
					fieldName: "登录失败",
					value: Number(pie.error)
				}
			];
			setStatusData(newColumns);
			setPieData(pieData);
		});
	}, []);

	const handleColumnDetails = (record: any) => {
		setDataSource(record);
		setDetailOpen(true);
	};
	const columns = createTableColumns(statusOptions, handleColumnDetails);
	//数据请求
	const tableDataRequest = async (params: {} | undefined) => {
		return await getPageList(params).then((data: any) => {
			return data;
		});
	};
	return (
		<>
			<Row gutter={[12, 10]}>
				<Col span="16">
					<ProCard>{statusData.length > 0 ? <WeekColumn data={statusData} /> : "loading..."}</ProCard>
				</Col>
				<Col span="8">
					<ProCard>{pieData.length > 0 ? <CountPie data={pieData} /> : "loading..."}</ProCard>
				</Col>
				<Col>
					<ProTable<API.Setting.LoginLogVo>
						actionRef={actionRef}
						scroll={{ y: tableSrcollHeight, x: 1000 }}
						search={false}
						tableStyle={{
							minHeight: "calc(100vh - 420px)"
						}}
						formRef={formTableRef}
						rowKey="id"
						key="logininforList"
						pagination={pagination}
						tableAlertRender={false}
						params={params}
						columns={columns}
						toolbar={{
							search: {
								style: { width: 280 },
								placeholder: "请输入账号进行搜索",
								allowClear: true,
								onSearch: (value: string) => {
									setParams({ ...params, userName: value });
									actionRef.current?.reload();
								}
							},
							menu: {
								type: "tab",
								activeKey: activeKey,
								items: tableTab,
								onChange: key => {
									setParams({ status: key === "oper" ? "0" : "1" });
									setActiveKey(key as string);
								}
							}
						}}
						rowSelection={{
							onChange: (_, selectedRows) => {
								setSelectedRows(selectedRows);
							}
						}}
						request={tableDataRequest}
					/>
				</Col>
			</Row>

			<LoginLogDetail
				open={detailOpen}
				statusOptions={statusOptions}
				dataSource={dataSource}
				onClose={() => {
					setDetailOpen(false);
				}}
			/>
		</>
	);
};

export default OperlogTableList;
